import { useMemo } from 'react';
import { Form, Input, Radio, InputNumber, Row, Col, Switch } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import MemberSelector from '../components/MemberSelector';
import GetVariables from '../components/GetVariables';
import { formActivityNoVerification, formNameVerification } from '../../utils';

export default function Initiator(props: any) {
  const { form, processData } = props;
  const ccCategoryValue = Form.useWatch(['baseInfo', 'ccCategory'], form);
  const performerTypeValue = Form.useWatch(['baseInfo', 'performerType'], form);
  const performerCategoryValue = Form.useWatch(['baseInfo', 'performerCategory'], form);

  const memberType = useMemo(() => {
    switch (performerTypeValue) {
      case 'user':
        return 'user';
      case 'userGroup':
        return 'group';
      case 'position':
        return 'position';
      case 'dept':
        return 'department';
      default:
        return '';
    }
  }, [performerTypeValue]);

  const approver = useMemo(() => {
    let _approver = [
      {
        label: '指定用户',
        value: 'user',
      },
      {
        label: '指定用户组',
        value: 'userGroup',
      },
      {
        label: '指定职位',
        value: 'position',
      },
      {
        label: '指定部门',
        value: 'dept',
      },
      {
        label: '变量',
        value: 'vars',
      },
      {
        label: '发起人',
        value: '${initiator}',
      },
      {
        label: '发起人直属主管',
        value: '${scriptServiceImpl.getInitiatorSupervisor(execution)}',
      },
      {
        label: '发起人部门主管',
        value: '${scriptServiceImpl.getInitiatorDeptManager(execution)}',
      },
      {
        label: '前一步直属主管',
        value: '${scriptServiceImpl.getPrevActivitySupervisor(execution)}',
      },
      {
        label: '前一步部门主管',
        value: '${scriptServiceImpl.getPrevActivityDeptManager(execution)}',
      }
    ];
    if (performerCategoryValue == 'cliamCategory') {
      _approver = _approver?.filter((item) => item?.value != '${initiator}');
    }
    return _approver;
  }, [performerCategoryValue]);

  return (
    <>
      <Form.Item label='是否会签节点' name={['baseInfo', 'isCounterSignNode']} hidden>
        <Input />
      </Form.Item>
      <Form.Item
        label='任务标识'
        name={['baseInfo', 'activityNo']}
        rules={formActivityNoVerification}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label='任务名称'
        name={['baseInfo', 'taskName']}
        rules={formNameVerification}
        className='process-designer-form-item-required'
      >
        <Input />
      </Form.Item>
      <Form.Item label='审批类别' name={['baseInfo', 'performerCategory']} className='bpmn-custom-properties-radio-wrap'>
        <Radio.Group
          options={[
            { label: '处理（直接由选择的审批人进行审批处理）', value: 'assigeenCategory' },
            { label: '待领（需选择的待领审批人，自行领取后进行审批处理）', value: 'cliamCategory' },
          ]}
        />
      </Form.Item>
      <Form.Item label='审批人设置' name={['baseInfo', 'performerType']} className='bpmn-custom-properties-radio-row-wrap'>
        <Radio.Group>
          <Row gutter={[0, 8]}>
            {
              approver?.map((item) => {
                return (
                  <Col span={8} key={item?.value}>
                    <Radio value={item?.value}>{item?.label}</Radio>
                  </Col>
                )
              })
            }
          </Row>
        </Radio.Group>
      </Form.Item>
      {
        memberType
        &&
        <Form.Item label='选择审批人' name={['baseInfo', 'assignee']}>
          <MemberSelector type={memberType} config={{ multiple: performerCategoryValue == 'cliamCategory' && memberType == 'user' ? true : false }} />
        </Form.Item>
      }
      {
        performerTypeValue == 'vars'
        &&
        <Form.Item label='变量' name={['baseInfo', 'assignee']}>
          <GetVariables processId={processData?.id || ''}/>
        </Form.Item>
      }
      <Form.Item label='最小回复数' name={['baseInfo', 'minReplyNumber']}>
        <InputNumber style={{ width: '100%' }} min={1} />
      </Form.Item>
      <Form.Item
        label={
          <>
            抄送未审批人
            <ExclamationCircleOutlined
              title='多人审批时设置了最小回复数后，配置是否抄送给未审批人'
              style={{
                position: 'relative',
                left: 4,
                color: 'rgba(0,0,0,.85)',
                cursor: 'pointer',
              }}
            />
          </>
        }
        name={['baseInfo', 'copying']}
        valuePropName='checked'
      >
        <Switch />
      </Form.Item>
      <Form.Item label='抄送类别' name={['baseInfo', 'ccCategory']} className='bpmn-custom-properties-radio-noWrap'>
        <Radio.Group
          options={[
            { label: '用户自定义', value: '0' },
            { label: '默认抄送', value: '1' },
          ]}
        />
      </Form.Item>
      {ccCategoryValue == '1' && (
        <>
          <Form.Item
            label='抄送规则'
            name={['baseInfo', 'ccRules']}
            className='bpmn-custom-properties-radio-noWrap'
          >
            <Radio.Group
              options={[
                // { label: '任务审批抄送', value: false },
                { label: '任务结束抄送', value: true },
              ]}
            />
          </Form.Item>
          <Form.Item label='抄送人' name={['baseInfo', 'ccMember']}>
            <MemberSelector />
          </Form.Item>
        </>
      )}
    </>
  );
};